<template>
  <pageHeader
    :title="
      route.query.saveId
        ? disabled
          ? '工序组详情'
          : '修改工序组'
        : '新增工序组'
    "
    :breadCrumb="['工厂建模', '工序组管理', '工序组管理']"
    :show-back="true"
  >
    <template #footer>
      <a-space :size="20">
        <a-button @click="router.back()">取消</a-button>
        <a-button type="primary" @click="handleOk">保存</a-button>
      </a-space>
    </template>
    <a-spin :loading="loading" class="cantainer">
      <a-form :model="formData" ref="refForm" auto-label-width>
        <a-row :gutter="15">
          <a-col :span="6">
            <a-form-item label="工序组编码">
              <a-input placeholder="无需输入，系统自动生成..." disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="工序组名称"
              field="processName"
              :rules="getRules('工序组名称')"
            >
              <a-input
                v-model="formData.processName"
                :disabled="disabled"
                placeholder="请输入工序组名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="生产方式"
              field="productionMethod"
              :rules="getRules('生产方式')"
            >
              <a-select
                v-model="formData.productionMethod"
                :disabled="disabled"
                placeholder="请选择"
              >
                <a-option
                  v-for="item in ['自制', '委外']"
                  :key="item"
                  :value="item"
                >
                  {{ item }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="启用状态"
              field="state"
              :rules="getRules('启用状态')"
            >
              <a-select
                v-model="formData.state"
                placeholder="请选择"
                :disabled="disabled"
              >
                <a-option
                  v-for="(item, index) in ['启用', '停用']"
                  :key="item"
                  :value="index + 1"
                >
                  {{ item }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <WorkSerialList
        :productionMethod="formData.productionMethod"
        :disabled="disabled"
        ref="refWorkSerialList"
      />
    </a-spin>
  </pageHeader>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import {
    GetWorkSerialGroup,
    AddWorkSerialGroup,
    EditWorkSerialGroup,
  } from '@/api/FactoryModeling';
  import { useRoute, useRouter } from 'vue-router';
  import { TWorkSerialGroup } from '@/api/FactoryModeling/type';
  import WorkSerialList from './WorkSerialList.vue';

  let route = useRoute();
  let router = useRouter();
  let refWorkSerialList = ref();
  let loading = ref(false);
  let formData = reactive<TWorkSerialGroup>({
    type: 2,
  });
  let getRules = (name?: string) => {
    return [{ required: true, message: (name || '') + '不能为空' }];
  };

  let refForm = ref();
  let handleOk = async () => {
    try {
      let check = await refForm.value.validate();
      let set = refWorkSerialList.value.getList();
      if (set && !check) {
        let data = {
          ...formData,
          set,
        };
        let res = formData.id
          ? await EditWorkSerialGroup(data)
          : await AddWorkSerialGroup(data);
        router.back();
      }
    } catch (err) {
      console.log(err);
    }
  };
  let disabled = ref(false);
  onMounted(async () => {
    if (!route.query.saveId) return refWorkSerialList.value.setList();
    loading.value = true;
    try {
      let res = await GetWorkSerialGroup({ id: route.query.saveId });
      if (route.query.isDisabled) disabled.value = true;
      refWorkSerialList.value.setList(res.set);
      Object.assign(formData, res);
    } catch (err) {
      console.error(err);
    }
    loading.value = false;
  });
</script>

<style scoped>
  .cantainer {
    padding: 20px;
    width: 100%;
  }

  .box {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: end;
  }
</style>
